<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3之3D</title>
<style>
	#main{ width:150px; height:150px; 
 		border:1px #000 solid; position:relative; }
	#box{ width:50px; heigh :50px; position:absolute;
 	      left:50px; top:50px; perspective:50px; }
 	#box div{ width:50px; height:50px; position:absolute;
 		   backface-visibility:hidden; transition:1s; }
  	#box div:nth-of-type(1){ background:red; transform:rotateY(0deg); }
 	#box div:nth-of-type(2){ background:blue; transform:rotateY(-180deg); }
 	#main:hover #box div:nth-of-type(1){ background:red; transform:rotateY(180deg); }
	#main:hover #box div:nth-of-type(2){ background:blue; transform : rotateY(0deg); }
</style>
</head>
<body>
<div id="main">
	<div id="box">
    	<div>HTML</div>
        <div>CSS</div>
    </div>
</div>
</body>
</html>
